<template>
  <div class="reContent" v-loading="loading" >
    <div class="logAddView">
      <el-form ref="form" :model="form" :rules="rules">
        <el-select v-model="form.category" placeholder="请输入跟进类型">
          <el-option
            v-for="dict in dict.type.record_category"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="form.recordTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="本次跟进时间">
        </el-date-picker>
        <el-date-picker
          v-model="form.nextTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="下次联系时间">
        </el-date-picker>
        <el-button type="primary" @click="addSubmitForm" class="rightTop">提 交</el-button>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请在此输入跟进内容"
          v-model="form.content">
        </el-input>
      </el-form>
    </div>
    <st-sections title="跟进记录列表" >
        <el-timeline >
          <el-timeline-item v-for="item in recordList" :timestamp="item.createdTime" placement="top">
            <el-card>
              <div class="flexRowJb">
                <div class="flexCenter">
                  <img :src="customer_pool_module" style="height: 40px;width:40px;"/>
                  <div class="flexClo">
                    <div style="display: block;">
                      <span style="font-size: 16px;font-weight: 700;margin-left: 15px;">{{item.createdBy}}</span>
                      <span style="margin-left: 36px;font-size: 14px;color:#007aff;">{{item.categoryDisp}}</span>
                    </div>
                    <div style="margin: 7px 0 0 16px;color: #686868;">{{item.createdTime}}</div>
                  </div>
                </div>
                <div>
                  <el-button type="primary"
                             @click="handleUpdate(item)" >修改</el-button>
                  <el-button type="danger" @click="handleDelete(item)">删除</el-button>
                </div>
              </div>
              <el-row style="margin-top: 15px;">
                <el-col :span="24">{{item.content}}</el-col>
              </el-row>
              <el-row style="margin-top: 15px;">
                <el-col :span="6">
                <div><i class="el-icon-time"></i>本次跟进时间：{{item.recordTime}}</div>
              </el-col>
                <el-col :span="6">
                  <div><i class="el-icon-time"></i>下次跟进时间：{{item.nextTime}}</div>
                </el-col>
              </el-row>
            </el-card>
          </el-timeline-item>
        </el-timeline>

    </st-sections>
  <st-dialog
    :title="form.createdBy + form.createdTime + '跟进记录'"
    v-if="open"
    width="900px"
    height="300px"
    @close="cancel"
    @save="updateSubmitForm"
    append-to-body
  >
    <div class="logAddView">
      <el-form ref="updateForm" :model="updateForm" :rules="rules">
        <el-select v-model="updateForm.category" placeholder="请输入跟进类型">
          <el-option
            v-for="dict in dict.type.record_category"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="updateForm.recordTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="本次跟进时间">
        </el-date-picker>
        <el-date-picker
          v-model="updateForm.nextTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="下次联系时间">
        </el-date-picker>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请在此输入跟进内容"
          v-model="updateForm.content">
        </el-input>
      </el-form>
    </div>
  </st-dialog>
  </div>
</template>

<script>
import  customer_pool_module from '@/assets/img/customer_pool_module.png'
import { listRecord , addRecord ,updateRecord , delRecord} from '@/api/crm/record'
export default {
  name: "detailRecord",
  dicts: ['record_category'],
  props:{
    customerForm:{
      type:Object,
      default:{}
    }
  },
  data(){
    return{
      customer_pool_module:customer_pool_module,
      open:false,
      queryParams:{},
      form:{},
      updateForm:{},
      recordList:[],
      loading:false,
      rules: {}
      }
  },
  mounted() {
    this.getList();
  },
  methods:{
    show(){
      this.getList();
    },
    /** 查询负责人变更记录列表 */
    getList() {
      this.$set(this.queryParams,'customerId',this.customerForm.customerId)
      this.loading = true;
      listRecord(this.queryParams).then(response => {
        this.recordList = response.rows;
        this.loading = false;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(item) {
      this.updateForm = {
        category: null,
        recordTime: null,
        nextTime: null,
        content:null
      };
      this.resetForm("updateForm");
      this.updateForm =Object.assign(this.updateForm,item) ;
      this.open=true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 表单重置
    reset() {
      this.form = {
        category: null,
        recordTime: null,
        nextTime: null,
        content:null
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    addSubmitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            this.$set(this.form, "customerId", this.customerForm.customerId);
            addRecord(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.reset();
              this.getList();
            });
          }
      });
    },
    updateSubmitForm() {
      this.$refs["updateForm"].validate(valid => {
        if (valid) {
          updateRecord(this.updateForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(item) {
      const recordIds = [item.recordId];
      this.$modal.confirm('是否确认删除记录编号为"' + recordIds + '"的数据项？').then(function() {
        return delRecord(recordIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  }
}
</script>

<style scoped lang="scss">
.logAddView{
  //width: 100%;
  height: 150px;
  border: 1px solid #d3d4d6;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 8px;
  margin: 10px;
  position: relative;
  .rightTop{
    position: absolute;
    right:30px;
  }
  .el-date-editor{
    margin-left: 10px;
  }
  .el-textarea{
    margin-top: 10px;
  }
  ::v-deep .el-textarea__inner{
    border: 0 !important;
    resize: none !important;
  }
}



.reContent{
  height: calc(100vh - 273px);
  overflow: auto;
}
.el-timeline{
  padding-left: 0px;
  margin: 10px;
}

.flexRowJb{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flexClo{
  display: flex;
  flex-direction: column;
}

.flexCenter {
  display: flex;
  align-items: center;
}
</style>
